<template>
  <div class="shopcar">
     <div class="shopcar-main">
       <van-swipe-cell v-for="item in cartList" :key="item.id">
         <van-checkbox v-model="checked"></van-checkbox>
        <van-card 
         :num="item.count"
          :price="item.price"
          :desc="item.content"
          :title="item.title"
          class="goods-card"
           :thumb="item.image"
        >
         <template #footer>
            <span @click="handelReduce(item.id)">-</span>
            <span>+</span>
          </template>
        </van-card>
          
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
       
      </van-swipe-cell>

        
    
     </div>
    <van-submit-bar :price="3050" button-text="立即购买" >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
export default {
  data(){
    return {
      checked:false,
    }
  },
  created(){
   this.getCartList()
  },
  computed:{
    ...mapState(['cartList'])
  },
  methods:{
    ...mapActions(['getCartList','getCartCount']),
    handelReduce(id){
     let obj= this.cartList.find(item=>item.id===id);
     if(obj.count<=1){
       obj.count=1
     }else{
       obj.count-=1
     }
     let newCount=obj.count;
       this.getCartCount({id:id,count:newCount})
    }
  }
}
</script>

<style scoped lang='scss'>
.shopcar{
  width: 100%;
  height: 100%;
}
.van-submit-bar{
  position: fixed;
  bottom: 40px;
}
.van-swipe-cell__wrapper{
  display: flex;
  align-items: center;
}
.van-card__footer{
  span{
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px #ccc solid;
    margin-left: 2px;
    text-align: center;
    line-height: 15px;
  }
}
</style>